import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
import { shield, fullscreenIcon1, cancelfullscreenIcon2 } from "@excalidraw/excalidraw/components/icons";
import { useI18n } from "@excalidraw/excalidraw/i18n";
import { useCallback, useEffect, useRef, useState } from "react";

export const EncryptedIcon = () => {
  const { t } = useI18n();

  const [isFullscreen, setIsFullscreen] = useState(false);
  const element = document.documentElement; // 或者使用 ref 来引用特定元素

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  };

  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };

    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Chrome, Safari and Opera
    document.addEventListener('msfullscreenchange', handleFullscreenChange); // IE/Edge

    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
      document.removeEventListener('msfullscreenchange', handleFullscreenChange);
    };
  }, []); // Empty dependency array means this effect runs once after mount and cleanup on unmount.


  return (
    <div style={{ width: '200px', display: 'contents' }}>
      <img
        src="/logo.png"
        style={{ height: '45px', position: 'relative', top: '3px' }}
      />
      <div className="encrypted-icon tooltip" style={{ color: '#d83344' }}>
        千羽鹤日语画板教学工具
      </div>
      <div className="right_bottom_pannel">
        <div className="encrypted-icon tooltip">
          <Tooltip label={t("encrypted.tooltip")} long={true}>
            {shield}
          </Tooltip>
        </div>
        {isFullscreen}
        {
          isFullscreen ?
            (<div className="encrypted-icon tooltip fullscreenbtn fullscreen_btn" onClick={toggleFullscreen}>
              {cancelfullscreenIcon2}
            </div>)
            :
            (<div className="encrypted-icon tooltip calcelfullscreenbtn fullscreen_btn" onClick={toggleFullscreen}>
              {fullscreenIcon1}
            </div>)
        }
      </div>
    </div>
  );
};
